<template>
  <z-checkbox-group v-model:value="value" :options="options" :min="2" :max="4" />
  <z-checkbox-group v-model:value="value1" :options="options" :min="2" :max="4" />
  <br />
  <br />
  <!-- <z-checkbox-group v-model:value="value1" style="width: 100%" :min="2" :max="4">
    <z-checkbox
      v-for="(item, index) in options"
      :key="index"
      :value="item.value"
      :disabled="item.disabled"
      >
      {{ item.label }}
    </z-checkbox>
  </z-checkbox-group> -->
</template>
<script>
import { defineComponent, ref } from 'vue'
const options = [
  { label: 'Apple', value: '1', disabled: false },
  { label: 'Pear', value: '2', disabled: false },
  { label: 'Pear1', value: '3', disabled: false },
  { label: 'Pear2', value: '4', disabled: false },
  { label: 'Pear3', value: '5', disabled: false },
  { label: 'Orange', value: '6', disabled: true }
]

export default defineComponent({
  name: 'checkboxDemo5',
  setup(){
    const value = ref(['1'])
    const value1 = ref(['1', '2'])
    return {
      value,
      value1,
      options
    }
  }
})
</script>
